<!--
 * @Author: your name
 * @Date: 2020-07-29 22:44:27
 * @LastEditTime: 2020-08-09 18:49:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H52002-VueMobile-accp\honeybud\src\components\Classifylist.vue
--> 
<template>
  <div class="classfiylist">
    <section>
      <header class="category-header wrap">
         <van-icon class="arrow-left" @click="onClickLeft"  size="7vw" name="arrow-left" color="#333" />
        <router-link to="/search">
          <van-search background="#f1f1f1" shape="round" placeholder="搜索蜜芽商品" />
        </router-link>
      </header>
      <van-sticky>
        <nav class="screen_nav">
          <ul>
            <li
              class="rq"
              v-for="(item,index) in list"
              :key="index"
              v-text="item.text"
              :class="{'active' : tabIndex === index}"
              @click="tabMenu(index,item.order)"
              dhref="/search/s?b=18835&amp;jh=1&amp;order=normal"
            ></li>
          </ul>
        </nav>
      </van-sticky>
      <div class="mask"></div>
      <div id="screening-box" class="filter-more">
        <ul id="tab-bar" class="show-more">
          <li name="蜜芽自营" id="蜜芽自营" class="item">蜜芽自营</li>

          <li name="分类" id="分类" @click="isShow=!isShow" class="item">分类</li>
        </ul>

        <div class="item-options">
          <ul data-bar-id="分类" class="line_cols_2 checkbox" :class="isShow?'show':''">
            <li type-id="16423">文胸</li>

            <li type-id="12274">塑身衣</li>

            <li type-id="12231">防晒帽</li>
          </ul>
        </div>
      </div>
      <div class="screen-btns" :class="isShow?'show':''">
        <a href="javascript:void(0)" class="btn btn_1" id="ResetBtn">重置</a>
        <a href="javascript:void(0)" class="btn btn_2" id="SureBtn">确认</a>
      </div>
      <div id="jc_msg"></div>
      <loading v-show="isLoading" :loading-type="2"></loading>
      <div class="proList" id="listItems" v-show="!isLoading" v-if="items.length!=0">
        <refresh :on-refresh="onRefresh"  style="top: 145px;">
          <div class="item-list">
            <div class="item">
              <div
                class="defaultBlock"
                :id="'item_'+item.id"
                data-sku="5681000"
                data-cluster
                v-for="(item,index) in items"
                :key="index"
                @click="classfiyDetale(item.id)"
              >
                <a :title="item.brand_name + item.name">
                  <div class="entranceMap">
                    <img :src="item.m_search_pic" :alt="item.name" />
                    <div class="new_marks">
                      <span class="xinpin"></span>
                    </div>
                    <span v-if="item.code_color" class="choose_color">2色可选</span>
                  </div>
                  <div class="rim">
                    <div class="mainTitle">
                      <i class="ms_tag"></i>
                      {{item.brand_name +'&nbsp;'+ item.name}}
                    </div>
                    <div class="price_desc">
                      <span></span>
                    </div>
                    <div class="active_box">
                      <span class="mod_tag">自营</span>
                      <span class="quan_tag"></span>
                      <span class="act_tag"></span>
                      <span class="y_f_x_tag"></span>
                    </div>
                    <div class="bottom_info">
                      <b class="price">{{item.real_price}}</b>
                      <del class="mp no_plus">{{item.market_price}}</del>
                      <span class="earn hide"></span>
                    </div>
                  </div>
                </a>
                <a href="javascript:viod(0);" class="Fbutton btn-cart addShoppingCart">
                  <span></span>
                </a>
              </div>
            </div>
          </div>
        </refresh>
      </div>
      <message v-show="isMessage" :message-text="messageText"></message>
    </section>
  </div>
</template>

<script>
import loading from "./common/loading";
import refresh from "./common/refresh";
import message from "./common/message";
import BScroll from "better-scroll";
import axios from "axios";

export default {
  data() {
    return {
      isShow: false,
      list: [
        { text: "人气", order: "normal" },
        { text: "销量", order: "sales" },
        { text: "新品", order: "newest" },
        { text: "价格", order: "price" }
      ],
      tabIndex: 0,
      items: [],
      order: "normal",
      isLoading: true,
      messageText: "",
      isMessage: false,
      done: ""
    };
  },
  components: {
    loading,
    refresh,
    message
  },

  methods: {
    tabMenu($index, type) {
      this.tabIndex = $index;
      this.order = type;
      console.log(this.order);
      this.getProductList();
      this.onRefresh(this.done);
    },
    classfiyDetale(id) {
      this.$store.commit('setProductId',id);
      this.$router.push({
        name: "Particulars",
      });
    },
    getProductList(num) {
     let id =  this.$route.params.id
      axios({
        url: `https://m.miabaobei.com/s/b${id}_jh1.html?order=${this.order}&page=1`
      }).then(res => {
        this.isLoading = false;
        if (res.data.length === 20) {
          this.$el.querySelector(".loading_text").style.display = "none";
          // this.showMessage();
          return;
        }
        this.items = res.data;
        this.$nextTick(() => {
          this._initScrollY();
        });
        console.log(this.items);
      });
    },
    // showMessage() {
    //   this.isMessage = true;
    //   this.messageText = "没有更多的商品啦！";
    //   setTimeout(() => {
    //     this.isMessage = false;
    //   }, 1200);
    // },
    //上拉刷新
    onRefresh(done) {
      this.num = 10;
      this.itmes = [];
      this.isLoading = true;
      this.getProductList(this.num);
      done(); // call done
    },
    //加载更多
    // onInfinite(done) {
    //   this.num++;
    //   this.getProductList(this.num);
    //   done();
    // },
    pageScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop > 100
        ? (this.seclectActive = true)
        : (this.seclectActive = false);
    },
    _initScrollY() {
      this.bscroll = new BScroll(".item-list", {
        click: true,
        probeType: 3,
        scrollY: true,
        momentum: true
      });
    },
    onClickLeft(){
      this.$router.go(-1);
    }

  },
   created() {
         let id =  this.$route.params.id
    axios({
      url: `https://m.miabaobei.com/s/b${id}_jh1.html?order=${this.order}&page=1`
    }).then(res => {
      this.isLoading = false;
      if (res.data.length === 0) {
        this.$el.querySelector(".loading_text").style.display = "none";
      
        return;
      }
      this.items = res.data;
      this.$nextTick(() => {
        this._initScrollY();
      });
      console.log(this.items);
    });
  },
};
</script>

<style lang="stylus" scoped>
.classfiylist {
  height: 100%;
  background: #f2f2f2;
}
header{
  display:flex
}
.van-icon {
  text-align: center;
  line-height: 2;
}
a{
  width 100%
}
.screen_nav {
  position: relative;
  background-color: #fff;
  z-index: 81;
}

.screen_nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  padding: 14px 0 0 0;
  border-bottom: 0.5px solid #e9e9e9;
  height: 40px;
}

.screen_nav li {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 20px;
  font-size: 14px;
  color: #666;
  padding-bottom: 10px;
}

.screen_nav li.active {
  color: #ea4141;
}

.filter-more {
  position: relative;
  z-index: 105;
}

.show-more {
  overflow: hidden;
  overflow-x: auto;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: text-top;
  white-space: nowrap;
  z-index: 2;
  display: flex;
  padding: 8px 15px 16px 15px;
  margin: 0;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
}

.show-more .item {
  min-width: 85px;
  padding: 0 5px;
  width: 24%;
  height: 25px;
  flex: none;
  line-height: 25px;
  color: #666;
  text-align: center;
  background-color: #f2f2f7;
  margin: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.item-options {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.checkbox {
  display: none;
}

.checkbox li {
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  color: #333;
  padding: 0 10px 0 35px;
  background-size: 15px auto;
}

.line_cols_2.show {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  max-height: 483px;
  overflow: hidden;
  overflow-y: auto;
  background-color: #fff;
}

.screen-btns {
  display: none;
  background-color: #fff;
  box-shadow: 0 -1px 3px #f1f1f1;
}

.screen-btns.show {
  display: flex;
  position: relative;
  z-index: 105;
}

.screen-btns .btn {
  flex: 1;
  padding: 0 15px;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  text-align: center;
}

.btn.btn_1 {
  background: #fefefe;
  color: #ea4141;
}

.btn.btn_2 {
  background: #ea4141;
  color: #fff;
}

#jc_msg {
  padding: 10px 10px 0 10px;
  font-size: 14px;
  color: #666;
  background-color: #f2f2f2;
}

.proList {
  padding-top: 0.04rem;
  background: #f2f2f2;
  font-size: 0;
}

.item-list {
  height: 667px;
}

.item {
  height: 5300px;
}

.defaultBlock {
  padding: 0.043rem;
  background: #fff;
  overflow: hidden;
  position: relative;
}

.entranceMap {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 0.05rem;
}

img {
  width: 100%;
}

.defaultBlock .entranceMap .choose_color {
  display: inline-block;
  position: absolute;
  border: 1px solid #aaa;
  left: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 0.2rem;
  text-align: center;
  height: auto;
  border-radius: 3px;
  background: #fff;
}

.choose_color {
  color: #aaa;
  font-size: 0.1rem;
}

.defaultBlock .rim {
  padding-left: 1.32rem;
  width: auto;
  min-height: 1.22rem;
  position: relative;
  margin-top: 0;
}

.mod_tag, .act_tag, .quan_tag {
  background: #ea4141;
  color: #fff;
  text-align: center;
  font-size: 0.05rem;
  font-style: normal;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid #ea4141;
  margin-right: 0.24375rem;
  display: none;
  padding: 0 0.1rem;
  line-height: 1.3;
}

.y_f_x_tag {
  text-align: center;
  font-size: 0.478rem;
  font-style: normal;
  border-radius: 2px;
  display: inline-block;
  margin-right: 0.24375rem;
  display: none;
  padding: 0 0.1rem;
  line-height: 1.3;
  background: #fff;
  color: #EA4141;
  width: auto;
  padding: 0 0.133rem;
  border: 1px solid #EA4141;
}

.mainTitle {
  font-size: 0.16rem;
  color: #313131;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  margin-bottom: 0.1rem;
  word-break: break-all;
}

.bottom_info {
  position: absolute;
  bottom: -18px;
  width: 100%;
}

.defaultBlock .rim .price {
  color: #ea4141;
  font-size: 0.2rem;
  margin-right: 0.1rem;
}

.defaultBlock .rim .mp {
  display: inline-block;
  font-size: 0.1rem;
  color: #999;
  text-decoration: line-through;
}

.defaultBlock .rim .earn {
  color: #d9b113;
  font-size: 0.6rem;
}

.btn-cart {
  position: absolute;
  right: 10px;
  bottom: -0.5rem;
  width: 0.5rem;
  height: 1.4rem;
  background: url('https://img.miyabaobei.com/d1/p6/2020/06/19/5e/13/5e132735a1c00984503c77e4439294ab341763955.png') no-repeat center; // img.miyabaobei.com/d1/p6/2020/06/19/5e/13/5e132735a1c00984503c77e4439294ab341763955.png) no-repeat center;
  background-size: 100% auto;
}

a {
  background: 0 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  color: #08c;
}

.searchEmpty {
  background: #fff;
  width: 100%;
  max-width: 640px;
  text-align: center;
  padding: 0.5rem 0 0.4rem 0;
}

.searchEmpty img {
  width: 0.75rem;
  margin: 0 auto;
}

.searchEmpty p {
  height: 0.5rem;
  line-height: 1;
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}

.recoProduct {
  background: #f2f2f2;
  text-align: center;
  width: 100%;
  padding: 0.8rem 0.5rem 0 0.5rem;
}

.recoProduct .recoProduct_title {
  height: 0.5px;
  background: #e8e8e8;
  position: relative;
}

.recoProduct .recoProduct_title>span {
  position: absolute;
  background: #f2f2f2;
  top: -0.5rem;
  padding: 0 0.1rem;
  font-size: 0.15rem;
  color: #999;
  left: 50%;
  margin-left: -25%;
}

.proList-more {
  padding: 0.5rem 0;
  text-align: center;
  font-size: 14px;
  color: #999;
}
</style>